<template>
  <AppLayout class="green-theme">
    <div class="content-container" v-for="doctor in DoctorsList" :key="doctor.id">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card>
            <image-preview :src="doctor.tupian" class="image" alt="Doctor Image" />          </el-card>
        </el-col>
        <el-col :span="16">
          <el-card class="doctor-card">
            <div class="doctor-content">
              <h2 class="doctor-name">{{ doctor.xiangmumingcheng }}</h2>
              <el-divider></el-divider>

              <div class="info-row">
                <div class="info-label">项目编号:</div>
                <div class="info-value">{{ doctor.xiangmubianhao }}</div>
              </div>

              <div class="info-row">
                <div class="info-label">项目分类:</div>
                <div class="info-value">{{ doctor.xiangmufenleiId }}</div>
              </div>

              <div class="info-row">
                <div class="info-label">项目介绍:</div>
                <div class="info-value">{{ doctor.xiangmujieshao }}</div>
              </div>

              <div class="info-row">
                <div class="info-label">医生姓名:</div>
                <div class="info-value">{{ doctor.yishengxingming }}</div>
              </div>

              <div class="info-row">
                <el-button type="primary" @click="goToDetails(doctor)">立即预约</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </AppLayout>
</template>

<script>
import AppLayout from "@/views/Layout1.vue";
import { getMedicalInfo } from "@/api/medicalInfo/medicalInfo";
import { getUser } from "@/api/system/user";
import 'bootstrap/dist/css/bootstrap.css'
import 'font-awesome/css/font-awesome.min.css'
export default {
  components: {
    AppLayout,
  },
  data() {
    return {
      loading: false,
      DoctorsList: [],
      queryParams: {
        // 直接使用路由参数作为ID
        id: this.$route.params.id,
      },
    };
  },

  created() {
    this.handleQueryById(); // 组件创建后自动查询
  },
  methods: {
    /** 通过ID查询项目 */
    handleQueryById() {
      if (!this.queryParams.id) {
        this.$message.error('请输入医生ID');
        return;
      }
      this.loading = true;
      getMedicalInfo(this.queryParams.id).then(response => {
        // 由于返回的数据是单个医生的对象，我们需要将其放在一个数组中
        this.DoctorsList = [response.data]; // 将响应数据放入数组
        this.loading = false;
      }).catch(error => {
        this.loading = false;
        this.$message.error('请求失败');
      });
    },
    goToDetails(doctor) {
      this.$router.push({ path: `/bookingD/${doctor.id}` });
    },
  },
  watch: {
    // 监听路由变化，如果ID发生变化，重新查询
    '$route.params.id': function (newId) {
      this.queryParams.id = newId;
      this.handleQueryById();
    }
  }
};

</script>
<style scoped>
.green-theme {
  background-color: #f5f9f6;
  color: #2c3e50;
}

.content-container {
  width: 70%;
  margin: 40px auto;
}

.image {
  width: 100%;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

.doctor-card {
  border: 1px solid #d9e9d6; /* 更新卡片的边框颜色为更接近#f5f9f6的色调 */
  border-radius: 4px;
  //overflow: hidden;
  transition: box-shadow .3s ease;
  background-color: #fcfdfc; /* 设定卡片的背景色为淡绿色，以更好地融入背景 */
}

.doctor-card:hover {
  box-shadow: 0 2px 12px 0 rgba(76,175,80,0.2);
}

.doctor-content {
  padding: 20px;
}

.doctor-name {
  font-size: 24px;
  color: #3e766d;
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.info-label {
  min-width: 100px;
  color: #3e766d;
  font-weight: 600;
}

.info-value {
  flex: 1;
  font-size: 16px;
  color: #2c3e50;
}
.el-button {
  margin-top: 20px; /* 为按钮和上方内容添加一些间距 */
  width: 100%; /* 让按钮宽度与容器宽度相匹配，看起来更整齐 */
  border-radius: 4px; /* 调整按钮圆角，与卡片和界面其它元素保持一致 */
  background-color: #4CAF50; /* 可以根据页面主题，给按钮设置一个主题色 */
  color: white; /* 设置按钮文字为白色，以增强对比度和可读性 */
}

.el-button:focus, .el-button:hover {
  background-color: #3e8e41; /* 鼠标悬停和焦点时按钮颜色变深 */
  color: white; /* 确保文字颜色在悬停时保持一致 */
}

</style>
